import React, { useState, useEffect } from 'react';
import Details from './details';
import Replies from './replies';
import { useParams } from 'react-router-dom';
import { Alert } from 'antd';

export default function Topic(props) {
    // console.log(props, '+++++++++++');
    // const { id } = props.match.params;
    const { id } = useParams();
    let [loading, setloading] = useState(true);
    let [isError, setError] = useState(false);
    let [error_msg, setErrorMsg] = useState('');
    let [data, setData] = useState({});
    // console.log(id);

    // 父组件负责发送请求得到数据并传给子组件
    useEffect(() => {
        fetch(`https://cnodejs.org/api/v1/topic/${id}`)
            .then(data => data.json())
            .then(data => {
                console.log(data, '----------');
                setloading(false)
                if (data.success) {
                    setData(data.data)
                } else {
                    setError(true)
                    setErrorMsg(data.error_msg)
                }
                // 状态
                // 1.正常状态
                // 2.出错了
                // 3.loading
            })
    }, [id])
    return (
        <>
            {isError ? (
                <Alert message={"请求出错了"}
                    closeable
                    type="error"
                    description={
                        <>
                            <p>{error_msg}</p>
                            <p>点击关闭返回上一步</p>
                        </>
                    }
                >

                </Alert>
            ) : (
                <>
                    <Details data={data} loading={loading}></Details>
                </>
            )}
            {/* <Details></Details>
            <Replies></Replies> */}
        </>
    )
}